<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      shadow
      statusBar
      title="房间管理"
      color="#1F1F1F"
      left-icon="left"
      leftWidth="60rpx"
      @clickLeft="onBack"
    >
    </uni-nav-bar>
    <float-button name="room" />

    <FilterView ref="filterView">
      <template #search>
        <uni-search-bar
          radius="17"
          bgColor="#fff"
          cancelButton="none"
          placeholder="搜索房间号"
          v-model="queryData.roomNo"
          @confirm="onSearch"
          @clear="onSearch"
        ></uni-search-bar>
      </template>
      <template #form>
        <uni-forms
          ref="filterForm"
          v-model="queryData"
          label-position="top"
          label-width="150"
        >
          <uni-row :gutter="26">
            <uni-col :span="12">
              <uni-forms-item label="楼层" name="floorId">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="fData"
                  v-model="queryData.floorId"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="用途" name="roomFunction">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="roomFunction"
                  v-model="queryData.roomFunction"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="类型" name="roomType">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="roomType"
                  v-model="queryData.roomType"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="入住状态" name="roomStatus">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="roomStatus"
                  v-model="queryData.roomStatus"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="部门" name="date">
                <uni-easyinput
                  v-model="queryData.deptNames"
                  placeholder="请输入"
                />
              </uni-forms-item>
            </uni-col>
          </uni-row>
        </uni-forms>
      </template>
      <template #footer>
        <view class="filterBtn">
          <button class="btn r" type="primary" @click="onReset">重置</button>
          <button class="btn s" type="primary" @click="onSure('filterForm')">
            确定
          </button>
        </view>
      </template>
    </FilterView>

    <view class="listBox">
      <swiper
        class="swiper-box"
        :duration="300"
        :current="current"
        @change="onTabchange"
        @transition="enabled = false"
        @animationfinish="enabled = true"
      >
        <swiper-item class="swiper-item">
          <list-scroll-view
            :ref="'scrollView0'"
            :api="getRoomList"
            height="80vh"
            :init="{}"
            :refresherEnabled="enabled"
          >
            <template v-slot:list="{ data }">
              <view class="box">
                <view
                  class="item"
                  v-for="(item, i) in data"
                  :key="i"
                  @click="onClick(item)"
                >
                  <view class="t">
                    <view class="l">{{ item?.building }}</view>
                    <view class="r"
                      ><view class="point" />{{ item.floor }}</view
                    >
                  </view>
                  <view class="b">
                    <view class="bItem">
                      <view class="name">房间号</view>
                      <view class="value">{{ item?.roomNo }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">用途</view>
                      <view class="value">{{
                        $util.selectDictLabel(roomFunction, item?.roomFunction)
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">类型</view>
                      <view class="value">{{
                        $util.selectDictLabel(roomType, item?.roomType)
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">空间</view>
                      <view class="value">{{ item?.spaceNameFull }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">部门</view>
                      <view class="value">{{ item?.deptNames || '--' }}</view>
                    </view>
                  </view>
                  <view
                    :class="{
                      status: true,
                      warn: item.roomStatus == 2,
                    }"
                    >{{ $util.selectDictLabel(roomStatus, item?.roomStatus) }}
                  </view>
                </view>
              </view>
            </template>
            <template #empty>
              <view class="uni-nodata">暂无数据!</view>
            </template>
          </list-scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import { getRoomList, getFloorListAll } from '@/api/room';
import useAppStore from '@/store/modules/app';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
export default {
  components: {
    FilterView,
    ListScrollView,
  },
  data() {
    return {
      roomFunction: [
        {
          label: '职工住宿',
          text: '职工住宿',
          value: '1',
        },
        {
          label: '功能',
          text: '功能',
          value: '2',
        },
        {
          label: '外来招待',
          text: '外来招待',
          value: '3',
        },
      ],
      roomType: [
        {
          label: '单人间',
          text: '单人间',
          value: '1',
        },
        {
          label: '双人间',
          text: '双人间',
          value: '2',
        },
        {
          label: '三人间',
          text: '三人间',
          value: '3',
        },
        {
          label: '四人间',
          text: '四人间',
          value: '4',
        },
        {
          label: '五人间',
          text: '五人间',
          value: '5',
        },
        {
          label: '六人间',
          text: '六人间',
          value: '6',
        },
        {
          label: '七人间',
          text: '七人间',
          value: '7',
        },
        {
          label: '夫妻间',
          text: '夫妻间',
          value: '12',
        },
        {
          label: '套间',
          text: '套间',
          value: '11',
        },
      ],
      roomStatus: [
        {
          label: '空房',
          text: '空房',
          value: '1',
        },
        {
          label: '住满',
          text: '住满',
          value: '2',
        },
        {
          label: '空余床位',
          text: '空余床位',
          value: '3',
        },
      ],
      queryData: {},
      fData: [],
      // api
      getRoomList,
      // swiper
      current: 0,
      enabled: true,
      data: ['列表'],
      // store
      appStore: useAppStore(),
    };
  },
  onLoad(query) {
    this.initData();
  },
  onShow() {
    this.$nextTick(() => {
      for (let i = 0; i < this.data.length; i++) {
        this.$refs[`scrollView${i}`].getData(true);
      }
    });
  },
  methods: {
    onSure(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$refs[`scrollView${this.current}`].searchData(this.queryData);
          this.$refs.filterView.onClose();
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onReset() {
      this.queryData = this.$options.data().queryData;
    },
    onSearch(e) {
      this.$refs[`scrollView${this.current}`].searchData(this.queryData);
    },
    // 初始数据
    initData() {
      getFloorListAll().then((res) => {
        this.fData = res.data.map((item) => {
          return {
            text: `${item.building}/${item.floor}`,
            label: `${item.building}/${item.floor}`,
            value: item.floorId,
          };
        });
        // this.appStore.updateDeptData(this.dData);
      });
    },
    // 跳转
    onClick(item) {
      // url参数
      let obj = {
        roomId: item.roomId,
        floor: item.floor,
        building: item.building,
        spaceNameFull: item.spaceNameFull,
      };
      let str = this.$util.jsonToUrlParam(obj);
      this.onLocation(`/pages/room/detail?${str}`);
    },
    // swiper
    onTabchange(e) {
      let index = e.target.current || e.detail.current;
      this.current = index;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .listBox {
    flex: 1 1 auto;
    position: relative;
    .swiper-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .box {
      margin: 0 36rpx;
    }
    .item {
      line-height: 1;
      margin-bottom: 30rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(0, 0, 0, 0.06);
      letter-spacing: 4rpx;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      .t {
        padding: 24rpx 34rpx 16rpx;
        border-bottom: 2rpx solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l {
          font-size: 32rpx;
          color: #333333;
          line-height: 38rpx;
        }
        .r {
          font-size: 32rpx;
          color: #505050;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .point {
            width: 12rpx;
            height: 12rpx;
            margin-right: 6rpx;
            background: #ffb93b;
            border-radius: 50%;
          }
        }
      }
      .b {
        padding: 26rpx 34rpx 32rpx;
        .bItem {
          margin-bottom: 16rpx;
          display: flex;
          align-items: baseline;
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            width: 35%;
            font-size: 28rpx;
            color: #989898;
            line-height: 33rpx;
          }
          .value {
            flex: 1;
            font-size: 28rpx;
            color: #505050;
            line-height: 33rpx;
          }
        }
      }
      .status {
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        padding: 8rpx 20rpx;
        background: #409eff;
        border-radius: 20rpx;
        position: absolute;
        top: 106rpx;
        right: 42rpx;
        &.warn {
          background: #e6a23c;
        }
      }
    }
  }
}
</style>
